import 'element-plus/es/components/message-box/style/css'
import {ElMessageBox } from 'element-plus'

// 安装 按需引入情况下支持$MessageBox方法
const ElementPlusMessageBox = {
  install: (app) => {
    let elMessageBox = (msg, title, op) => {
      return ElMessageBox(msg, title, op)
    }
    elMessageBox.alert = (msg, title, op = {
      showConfirmButton: false,
      draggable: true,
      customStyle: {
        width: '350px',
        borderRadius: '10px'
      }
    }) => {
      return ElMessageBox.alert(msg, title, op)
    }
    elMessageBox.confirm = (msg, title = '提示', op = {
      type: 'warning',
      closeOnClickModal: false,
      draggable: true,
      center: true,
      customStyle: {
        width: '300px',
        borderRadius: '10px'
      }
    }) => {
      return ElMessageBox.confirm(msg, title, op)
    }
    elMessageBox.prompt = (msg, tips, op = {
      closeOnClickModal: false,
      draggable: true,
      customStyle: {
        width: '350px',
        borderRadius: '10px'
      },
      inputType: 'textarea',
      inputPlaceholder: `请输入${msg}`,
      inputValidator: (val) => {
        if(!val) {
          return `请输入${msg}`
        }
      },
      beforeClose: (action, instance, done) => {
        if(action === 'confirm') {
          elMessageBox.confirm(tips).then(() => {
            done()
          }).catch(() => {})
        } else {
          done()
        }
      }
    }) => {
      return ElMessageBox.prompt(msg, op)
    }
    app.config.globalProperties.$messageBox = elMessageBox
  }
}

export default ElementPlusMessageBox